<div class="clr-row" style="padding-left: 1%">
  <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
    <form>
      <section class="form-block form-box">
        <div class="clr-row group">
          <div class="clr-col-sm-2">
            {{'TITLE.DEPARTMENT_NAME' | translate}}
          </div>
          <div class="clr-col-sm-10">
            {{cacheService?.namespace.name}}
          </div>
        </div>
        <div class="clr-row group">
          <div class="clr-col-sm-2">
            {{'TITLE.CREATE_TIME' | translate}}
          </div>
          <div class="clr-col-sm-10">
            {{cacheService?.namespace.createTime | date:'yyyy-MM-dd HH:mm:ss'}}
          </div>
        </div>
        <div class="clr-row group">
          <div class="clr-col-sm-2">
            <div class="flex" style="height:70px;flex-direction: column; justify-content:space-around;">
              <span>{{'TITLE.CPU_USAGE' | translate}}</span>
              <span>{{'TITLE.MEMORY_USAGE' | translate}}</span>
            </div>
          </div>
          <div class="clr-col-sm-10">
            <ng-container *ngFor="let cluster of clusters; let i = index">
              <div *ngIf="i < showNumber"
                   style="display: inline-flex;height: 70px;width: 150px; margin-right: 10px; flex-direction: column; justify-content: space-around;">
                <wayne-progress [label]="cluster" [count]="resources[cluster].usage.cpu"
                                [total]="dealLimitLogic(resources[cluster].limit.cpu)"></wayne-progress>
                <wayne-progress [label]="cluster" [count]="resources[cluster].usage.memory"
                                [total]="dealLimitLogic(resources[cluster].limit.memory)"></wayne-progress>
              </div>
            </ng-container>
            <div class="cluster-more" (click)="showMoreCluster()" *ngIf="clusters.length > showNumber">
              <clr-icon shape="angle-double"></clr-icon>
            </div>
          </div>
        </div>
        <div class="clr-row group">
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.DEPLOYMENT' | translate}}</div>
            <p class="card-text">
              {{resourceCount(deployment)}}
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.STATEFULSET' | translate}}</div>
            <p class="card-text">
              {{resourceCount(statefulSet)}}
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.DAEMONSET' | translate}}</div>
            <p class="card-text">
              {{resourceCount(daemonSet)}}
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.CRONJOB' | translate}}</div>
            <p class="card-text">
              {{resourceCount(cronJob)}}
            </p>
          </wayne-card>
        </div>
        <div class="clr-row group">
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.SERVICE' | translate}}</div>
            <p class="card-text">
              {{resourceCount(service)}}
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.CONFIGMAP' | translate}}</div>
            <p class="card-text">
              {{resourceCount(configMap)}}
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">{{'MENU.SECRET' | translate}}</div>
            <p class="card-text">
              {{resourceCount(secret)}}
            </p>
          </wayne-card>
          <wayne-card class="wayne-card">
            <div class="card-title">PVC</div>
            <p class="card-text">
              {{resourceCount(persistentVolumeClaim)}}
            </p>
          </wayne-card>
        </div>

      </section>
    </form>
  </div>
</div>
